<template>
  <div id="index">
    <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div class="main" v-else>
            <!-- 第一行 -->
            <div class="first-row">
                <dv-decoration-10 style="width:33.3%;height:5px;" />
                <dv-decoration-8 style="width:150px;height:50px;" />
                <div class="title">
                    <span>数据可视化平台</span>
                </div>
                <dv-decoration-8 :reverse="true" style="width:150px;height:50px;" />
                <dv-decoration-10 style="width:33.3%;height:5px;" />
            </div>

            <!-- 第二行 -->
            <div class="second-row">
                <div id="data1" :class="{current:isActive==1}"  @click="btn(1)">
                    <span>数据分析1</span>
                </div>
                <div id="data2" :class="{current:isActive==2}"  @click="btn(2)"><span>数据分析2</span></div>
                <dv-decoration-3 style="flex: 1;height:30px;" />
                <div id="data3" :class="{current:isActive==3}"  @click="btn(3)"><span>数据分析3</span></div>
                <div id="data4"><span>{{dateYear}}{{dateWeek}}{{dateDay}}</span></div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
data() {
    return {
        isActive:0,
        loading:false,
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
     
    }
},
methods:{
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = dayjs(new Date()).format('HH:mm:ss') 
        this.dateYear = dayjs(new Date()).format('YYYY-MM-DD') 
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    btn(index){
        this.isActive=index
        // console.log(this.isActive);
    },
   
},
mounted(){
    this.timeFn()
  
}
}
</script>

<style lang="scss">
  
    @import '@/scss/index.scss'
    
</style>